<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Template • TodoMVC</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- CSS overrides - remove if you don't need it -->
    <link rel="stylesheet" href="css/app.css">
</head>
<body ng-app="Todo">
<section class="todoapp" ng-controller="TodoController">
    <header class="header">
        <h1>todos</h1>
        <form ng-submit="add()">
            <input class="new-todo" placeholder="What needs to be done?" autofocus ng-model="text">
        </form>
    </header>
    <section class="main">
        <input class="toggle-all" type="checkbox">
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
            <li ng-repeat="(key,todo) in todos">
                <div class="view">
                    <input class="toggle" type="checkbox" ng-checked="todo.flag" ng-click="isChecked(key,'todo')">
                    <label>{{todo.text}}</label>
                    <button class="destroy" ng-click="delete(key,'todo')"></button>
                </div>
                <input class="edit" value="Create a TodoMVC template">
            </li>
            <li><h5>已完成</h5></li>
            <li ng-repeat="(key,done) in complete">
                <div class="view">
                    <input class="toggle" type="checkbox" ng-checked="done.flag" ng-click="isChecked(key,'done')">
                    <label>{{done.text}}</label>
                    <button class="destroy" ng-click="delete(key,'done')"></button>
                </div>
                <input class="edit" value="Rule the web">
            </li>
        </ul>
    </section>
    <footer class="footer">
        <span class="todo-count"><strong>{{todos.length}}</strong> item left</span>
        <button class="clear-completed">Clear completed</button>
    </footer>
</section>
<footer class="info">
    <p>Double-click to edit a todo</p>
    <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
    <p>Created by <a href="http://todomvc.com">you</a></p>
    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- <script src="js/base.js"></script> -->
<!-- <script src="js/app.js"></script> -->

<script src="./lib/angular.min.js"></script>
<script>
    var Todo = angular.module('Todo',[]);
    Todo.controller('TodoController',['$scope',function ($scope) {
        //代办事项
        $scope.todos = [];
        //已完成事项
        $scope.complete = [];

        $scope.add = function () {
            //已{text:$scope.text,flag:false}这样的格式往todos数组中push数据
            $scope.todos.push({text:$scope.text,flag:false});
            $scope.text = '';
//            console.log($scope.todos);
        }

        $scope.isChecked = function (key,type) {
            if(type == 'todo') {

                //已经完成的数据，他是从代办事项中点击选中获取当条数据的key做截取用，同时截取后的数据还是数组，同时
                //数组中只有唯一条数据[0]的方式将他取出  splice截取的意思 同时原数组中的数据会相应的减少这条数据
                var doneTodo = $scope.todos.splice(key,1)[0];
                doneTodo.flag = true;
                $scope.complete.push(doneTodo);
                console.log($scope.complete);
                console.log($scope.todos);

            }else if(type == 'done') {
                var todoTodo = $scope.complete.splice(key,1)[0];
                todoTodo.flag = false;
                $scope.todos.push(todoTodo);
                console.log($scope.todos);
                console.log($scope.complete);
            }
        }

        $scope.delete = function (key,type) {
            //在条目后面选中删除图标
            if(type == 'todo') {
                $scope.todos.splice(key,1)[0];
            }else if(type == 'done') {
                $scope.complete.splice(key,1)[0];
            }

        }
    }])
</script>
</body>
</html>
